<template>
	<view class="demand-info">
		<view class="list">
		
			<view v-for="(item,index) in list" :key="index" class="list-item" @click="routeToDetail(item)">
				<view class="list-top">
					<view class="left-field" v-if="item.role_id == 1">
						<image :src="item.user.avatar"></image>
						<text class="name">{{item.user.nickname}}</text>
					</view>
					<view class="left-field" v-else>
						<image :src="item.contact.avarat"></image>
						<text class="name">{{item.contact.name}}</text>
					</view>
				
					
					<text >{{item.group}}</text>
					
				</view>
				<view class="list-middle">
					<text>浏览内容：</text>
					<text style="margin-left: 20rpx;">{{item.module}}</text>
					</view>
				
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default{
		name:'contactPerson',
		props:{
			clientId:{
				type:String,
				required:true
			},
			moduleType:{
				type:String,
				default:'single'
			}
		},
		data(){
			return{
				total:0,
				list:[],
				currentPage:1,
				pageSize:10,
			}
		},
		created(){
			
		},
		mounted(){
			//子组件的created快于伏组件的onload
			this.getList();
		},
		// onReachBottom(){
		// 	console.log('onReachBottom')
		// 	if(this.total > this.pageSize * this.currentPage){
		// 		this.currentPage += 1;
		// 		this.getList();
		// 	}
		// },
		methods:{
			routeToDetail(item){
				//todo 访问记录详情
				if(this.moduleType == 'all'){
					this.$Router.push({name:"recordDetail",query:{id:item.id,customer:this.clientId,type:1}})
					
				} else {
					this.$Router.push({name:"recordDetail",query:{id:item.id,customer:this.clientId,type:2}})
				}
				
			},
			loadMore(){
				if(this.total > this.pageSize * this.currentPage){
					this.currentPage += 1;
					this.getList();
				}
			},
			levelColor(level){
				let color = '';
				switch(level.value){
					case '1':color = '#3B54DA';break;
					case '2':color = 'green';break;
					case '3':color = 'orange';break;
					case '4':color = 'red';break;
				}
				return color;
			},
			add(){
				this.$tip.toast('该功能暂未开通')
			},
			getList(){
				const reqData = {
					client_id:this.clientId,
					page:this.currentPage,
					limit:this.pageSize,
				}
				let url = '';
				if(this.moduleType == 'all') {
					url = '/api/business/browse/category/list';
				} else {
					url = '/api/business/browse/category/list';
				}
				this.$http.get(url, reqData).then((res) => {
					if(res.data.status == 200) {
						let list= res.data.data.data || [];
						this.list = this.list.concat(list);
						this.currentPage = res.data.data.current_page||1;
						this.pageSize =  res.data.data.per_page||20;
						this.total = res.data.data.total||0;
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.demand-info{
		
		font-size: 24rpx;
		.list{
			padding:0rpx 20rpx 112rpx;
			.content-bottom{
				color: #6F6F6F;
				margin:40rpx 0;
				text-align: center;
			}
		}
		.list-item{
			padding:30rpx 20rpx 40rpx ;
			font-size: 28rpx;
			border-bottom: 2rpx solid #EFEFEF;
			color: #000000;
			line-height: 28rpx;
			.list-top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 36rpx;
				.left-field{
					display: flex;
					image{
						width: 36rpx;
						height: 36rpx;
					}
				}
				.name{
					margin-left: 20rpx;
				}
				
			}
			
			
			.list-middle{
				
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #000000;
				line-height: 28rpx;
				font-size: 28rpx;
				
			}
			
		}
		.footer{
			position: fixed;
			bottom: 0;
			width: 100%;
			padding-bottom: env(safe-area-inset-bottom);
			height: calc(112rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: center;
			background: #FFFFFF;
			box-shadow:0 4rpx 17rpx 0 rgba(0, 0, 0, 0.1);
			align-items: center;
			.button{
				
			}
			
		}
	}
</style>